<template>
  <el-header
    :class="isCollapse ? 'el-header-no' : 'el-header'"
    style="height: 50px"
  >
    <el-button
      type="primary"
      @click="toggleCollapse"
      :isCollapse="!isCollapse"
      style="
        background-color: #fff;
        border: 0;
        font-size: 19px;
        float: left;
        margin-left: -20px;
      "
    >
      <i
        :class="{
          'el-icon-s-fold': !isCollapse,
          'el-icon-s-unfold': isCollapse,
        }"
        style="margin-top: 3px; color: #6f7374"
      ></i>
    </el-button>

    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link" style="color: #6f7374; margin-right: 10px">
        <el-avatar class="el-jst-2">
          <img :src="userImg" />
        </el-avatar>
        <div class="el-jst-3">
          管理员<i
            class="el-icon-arrow-down el-icon--right"
            style="color: #6f7374"
          ></i>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-key" command="edit">
          修改密码</el-dropdown-item
        >
        <el-dropdown-item icon="el-icon-switch-button" command="quit">
          退出登录</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>

    <el-button
      type="primary"
      @click="screen"
      style="
        background-color: #fff;
        border: 0;
        float: right;
        margin-right: 5px;
        margin-top: 6px;
        font-size: 18px;
      "
    >
      <i class="el-icon-full-screen" style="color: #6f7374"></i
    ></el-button>
    <el-button
      style="
        background-color: #fff;
        border: 0;
        color: white;
        font-size: 18px;
        margin-left: -18px;
        float: left;
      "
    >
      <i
        class="el-icon-refresh-left"
        style="color: #6f7374; margin-top: 3px"
        @click="refresh"
      ></i>
    </el-button>

    <div class="btn-bell">
      <el-tooltip
        effect="dark"
        :content="message ? `有${message}条未读消息` : `消息中心`"
        placement="bottom"
      >
        <router-link to="/tabs">
          <i class="el-icon-message-solid"></i>
        </router-link>
      </el-tooltip>
      <span class="btn-bell-badge" v-if="message"></span>
    </div>

    <el-breadcrumb separator="/" class="el-jst-6">
      <el-breadcrumb-item :to="{ path: '/home' }">工作台</el-breadcrumb-item>
      <el-breadcrumb-item :to="current.path" v-if="current">{{
        current.label
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </el-header>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
      computed: {
            ...mapState({
                current: state => state.tab.currentMenu
            }),
            isCollapse() {
             return this.$store.state.tab.isCollapse
            }
        },
        data() {
            return {
                userImg: require('../assets/img/20220127001.jpg'),
                message:2,
            }
        },
      methods: {
        toggleCollapse() {
        this.$store.commit('collapseMenu')
       },
        handleCommand(command) {
         switch (command) {
          case 'edit':
            console.log('修改密码')

            break;
          case 'quit':
            console.log('退出登录')
            const token = localStorage.getItem('TOKEN')
            localStorage.removeItem('TOKEN')
            this.$router.push('/')
            break;

          default:
            break;
        }
      },
      refresh() {
        location.reload();
      },
      screen() {
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },

    },

 }
</script>

<style>
@import "../assets/css/index.less";
</style>